<template>
	<view class="index">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" indicator-color="rgba(255 250 250,.3)" indicator-active-color="#DCDCDC" circular="true">
			<swiper-item @click="bannerItemClick('/pages/university/university')"><image src="../../static/university.jpg" mode=""></image></swiper-item>
			<swiper-item @click="bannerItemClick('/pages/weather/weather')"><image src="../../static/weather.jpg" mode=""></image></swiper-item>
			<swiper-item @click="bannerItemClick('/pages/dream/dream')"><image src="../../static/dream.jpg" mode=""></image></swiper-item>
		</swiper>
		<!-- 功能菜单 -->
		<view class="function_menu">
			<view class="menu_item" v-for="(item, index) in menuItem" :key="index" @click="navItemClick(item.url)">
				<image :src="item.picUrl" mode=""></image>
				<text>{{ item.title }}</text>
			</view>
		</view>
		<!-- 新闻列表 -->
		<view class="news">
			<view class="news-title">实时新闻</view>
			<view class="news_item" v-for="item in newList" :key="item.cid">
				<navigator :url='"/pages/news-detail/news-detail?url="+item.url' style="display: flex;">
					<image class="left" :src="item.imgsrc"></image>
					<view class="middle">
						<view class="title">{{ item.ltitle }}</view>
						<text>发表与：{{ item.ptime }}</text>
					</view>
					<image class="right" src="../../static/right.png" mode=""></image>
				</navigator>
			</view>
		</view> 
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuItem: [
				{
					picUrl: '../../static/img1.png',
					title: '天气查询',
					url: '/pages/weather/weather'
				},
				{
					picUrl: '../../static/img2.png',
					title: '手机归属地查询',
					url: '/pages/phone/phone'
				},
				{
					picUrl: '../../static/img6.png',
					title: '大学查询',
					url: '/pages/university/university'
				},
				{
					picUrl: '../../static/img4.png',
					title: '随机生成昵称',
					url: '/pages/nick-name/nick-name'
				},
				{
					picUrl: '../../static/img5.png',
					title: '周公解梦',
					url: '/pages/dream/dream'
				},
				{
					picUrl: '../../static/img3.png',
					title: '联系我',
					url: '/pages/code/code'
				}
			],
			newList: []
		};
	},
	onLoad() {
		this.getNews();
	},
	methods: {
		// 路由跳转
		// 轮播图跳转
		bannerItemClick(url) {
			uni.navigateTo({
				url
			});
		},
		// 菜单栏跳转
		navItemClick(url) {
			uni.navigateTo({
				url
			});
		},
		// 获取新闻列表
		// http://c.m.163.com/nc/article/headline/T1348649580692/0-40.html
		getNews() {
			uni.request({
				url: 'http://c.m.163.com/nc/article/headline/T1348649580692/0-40.html',
				method: 'GET',
				success: res => {
					this.newList = res.data.T1348649580692;
					console.log(this.newList)
				}
			});
		},
		// 新闻详情页跳转
		newsDetail() {
			uni.navigateTo({
				url: '/pages/news-detail/news-detail'
			});
		}
	}
};
</script>

<style lang="scss">
swiper {
	height: 380rpx;
	image {
		height: 100%;
		width: 100%;
	}
}

.function_menu {
	width: 100%;
	height: 360rpx;
	background-color: #e7e7e7;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	.menu_item {
		width: 33%;
		height: 49%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		text-align: center;

		image {
			width: 60rpx;
			height: 60rpx;
			margin: 30rpx auto;
		}

		text {
			font-size: 24rpx;
		}
	}
}
.news {
	width: 100%;
	.news-title {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background: #F0AD4E;
		color: #FFFFFF;
		font-size: 46rpx;
	}
	.news_item {
		display: flex;
		height: auto;
		border-bottom: 1px solid #e7e7e7;
		.left {
			width: 120rpx;
			height: 80rpx;
			margin: 20rpx 40rpx;
		}

		.middle {
			flex: 1;

			.title {
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			text {
				font-size: 24rpx;
				color: #757575;
			}
		}

		.right {
			width: 50rpx;
			height: 50rpx;
			margin: 35rpx 40rpx;
		}
	}
}
</style>
